<template>
  <div>
    <!-- <c-title :hide="false" text="代理商改价"></c-title> -->
    <div class="flex-col page">
      <div class="flex-col section">
        <!-- <img class="image" src="https://ide.code.fun/api/image?token=659ce891f9d81d0011b6314c&name=f7ef1c09f4b4c7e398c5e20507795e83.png" /> -->
        <div class="flex-row justify-center items-center relative group mt-18-5">
          <img @click="goback" class="image_2 pos_3" src="https://shops.cg500.com/static/newimg/17036578977205358553.png" />
          <span class="font text">先锋力榜</span>
        </div>
      </div>
      <div>
        <!-- Tab布局 -->
        <div class="navBox">
          <div class="titleBox" v-for="(item, index) in tabList" :key="index" @click="tabsOn(item.index)">
            <span :class="item.index == tabsId ? 'fontColorBox' : ''">{{ item.title }}</span>
            <hr :class="item.index == tabsId ? 'lineBox' : ''" />
          </div>
        </div>
        <div class="swiperTtemBox">
          <div style="width: 100%">
            <div class="flex-col line-tabs">
              <div class="flex-col section_5">
                <div class="flex-col">
                  <div class="flex-row justify-between group_5">
                    <div class="flex-row">
                      <span class="font_3">排名</span>
                      <span class="font_3 ml-73">姓名</span>
                    </div>
                    <span class="font_3 text_3">{{tabsId == 0 ? '人数' : '单量'}}</span>
                  </div>
                </div>
                <div class="flex-col mt-25-5">
                  <div class="flex-row items-center mt-26 list-item" style="width: 100%" v-for="(item, index) in list" :key="index">
                      <div class="font_4 text_12 flex-row " style="flex: 0.2;">
                        <div v-if="index == 0 || index == 1 || index == 2">
                          <img class="shrink-0 image_9" v-if="index == 0" src="https://shops.cg500.com/static/newimg/one.png" />
                          <img class="shrink-0 image_9" v-if="index == 1" src="https://shops.cg500.com/static/newimg/two.png" />
                          <img class="shrink-0 image_9" v-if="index == 2" src="https://shops.cg500.com/static/newimg/three.png" />
                        </div>
                        <span v-else class="text_11">{{ index + 1 }}</span>
                      </div>
                      <div class="flex-row items-center justify-start" style="flex: 0.6;">
                        <img class="shrink-0 image_5" :src="item.avatar" />
                        <span class="font_2 text_8">{{ item.nickname }}</span>
                      </div>
                    <span class="font text_9 text_10 flex-row flex-1 justify-end">{{ tabsId == 0 ? item.zhitui : item.count}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pioneerListController from "./pioneerListController";

export default pioneerListController;
</script>
<style>
body {
  background-color: #f5f5f5;
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
.mt-18-5 {
  margin-top: 18px;
}
.ml-73 {
  margin-left: 73px;
}
.mt-25-5 {
  margin-top: 25px;
}
.page {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 15px 7px 103px 15px;
  background-image: url("https://shops.cg500.com/static/newimg/zhitui@2x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image {
  margin-left: 18px;
  margin-right: 7px;
  width: 328px;
  height: 12px;
}
.group {
  padding: 20px 0;
}
.image_2 {
  width: 10px;
  height: 18px;
}
.pos_3 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.font {
  font-size: 18px;
  font-family: PingFang SC;
  line-height: 13px;
  font-weight: 700;
  color: #151515;
}
.text {
  color: #ffffff;
  line-height: 17px;
}

.line-tabs {
  padding-bottom: 14px;
}

.font_2 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 13px;
  font-weight: 700;
  color: #151515;
  text-align: left;
}
.navBox {
  /* tab整体样式 */
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 9px solid rgb(243, 244, 249);
}

.fontColorBox {
  /* 选中tab样式 */
  color: black;
  font-weight: bold;
}

.titleBox {
  /* 未选中tab样式 */
  color: rgb(168, 170, 175);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lineBox {
  /* 线条样式 */
  width: 27px;
  height: 3px;
  background: #a80402;
  margin-top: 5px;
  border-radius: 2px;
}

.swiperTtemBox {
  /* 内容样式 */
  padding: 8px;
  font-size: 14px;
  height: calc(100vh - 75px);
}

.font_4 {
  font-size: 18px;
  font-family: PingFang SC;
  line-height: 14px;
  font-weight: 700;
  color: #999999;
}
.text_12 {
  line-height: 13px;
}

.section_5 {
  margin: 0 15px;
  padding: 21px 25px;
  background-color: #ffffff;
  border-radius: 8px;
}
.group_5 {
  padding: 0 2px;
}
.font_3 {
  font-size: 12px;
  font-family: PingFang SC;
  line-height: 12px;
  font-weight: 700;
  color: #666666;
}
.text_3 {
  margin-right: 3px;
}

.image_5 {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 0;
}

.image_9 {
  width: 25px;
  height: 33px;
}
.list-item {
//   padding-left: 8px;
  padding-right: 4px;
}
.list-item:first-child {
  margin-top: 0;
}
.image_10 {
//   margin-left: 22px;
}
.text_8 {
  margin-left: 14px;
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text_9 {
  line-height: 14px;
}
.text_10 {
  margin-right: 4px;
  flex: 0.2;
  word-break: break-all;
}
.text_11 {
    width: 100%;
    word-break: break-all;
    text-align: left;
}
</style>